﻿<div>

<script type="text/javascript">
    $(function () {
        $("#cc").bind("contextmenu", function (e) {
            e.preventDefault();
            $.easyui.showMenu({
                left: e.pageX, top: e.pageY,
                items: [
                    { text: "测试菜单1", iconCls: "icon-hamburg-address" },
                    { text: "测试菜单2", handler: function (e, item) { alert(item.text); } },
                    {
                        text: function () { return "自定义菜单项" },
                        disabled: function () { return window.event.clientX < 300; },
                        style: { color: "red" },
                        bold: true,
                        handler: function (e, item) { alert(item.text); }
                    },
                    "-",
                    {
                        text: "测试菜单3", children: [
                            { text: "测试子菜单1", handler: function (e, item) { alert(item.text); } },
                            { text: "测试子菜单2", handler: function (e, item) { alert(item.text); } }
                        ]
                    },
                ]
            });
        });
    });
</script>

<h2>jEasyUI Menu Extensions - 动态批量创建 Menu</h2>
<p>该部分扩展由文件 jeasyui.extensions.menu.js 实现。</p>
<hr />
<p>该 DEMO 演示创建动态的鼠标右键菜单，并且可以自定义右键菜单的样式</p>
<div id="cc" style="border-width: 1px; border-style: solid; border-color: Black; width: 400px; height: 200px; padding: 10px;" >
    请用鼠标右键点击此区域
</div>

</div>